<template>
  <div class="mod-config">

    <!--      style="height: 1000px; padding: 10px;display: flex;align-items: center;justify-content: center;" -->
    <div ref="chart1" style="height: 800px; padding: 10px;display: flex;align-items: center;justify-content: center;"></div>
    <!--        <img width="50%" height="50%" src="./yaocaichandiTu.jpg">-->

  </div>


</template>

<script>

import * as echarts from 'echarts'
export default {
  data() {
    return {
      chanLiangList:[],
      zengSuList:[],
      yaoCaiList:['薄荷','草果','草河车','柴胡','淡豆豉','淡竹叶','党参','地丁','黄苓','荆芥','桔梗','茅根','佩兰','蒲公英','青蒿','忍冬藤','太子参','西洋参','夏桔草','香薷','玄参','茵陈','紫草','藁本','龙胆草','胡黄莲','谷精草','清全蝎','瓜篓','钩藤','丝瓜络','秦艽'],
      huoquYc:[],
      shuju:[],
    }
  },

  activated() {
    this.getData()
  },
  mounted() {

    // this.getData()
  },
  methods: {

    getData(){
      this.huoquYc=[]
      this.shuju=[]
// 当随机数组的长度小于10时继续循环
      while (this.huoquYc.length < 10) {
        // 生成一个随机索引
        var randomIndex = Math.floor(Math.random() * this.yaoCaiList.length);

        // 检查这个索引的元素是否已经被选择过
        if (this.huoquYc.indexOf(this.yaoCaiList[randomIndex]) === -1) {
          // 如果没有，将这个元素添加到随机数组中
          this.huoquYc.push(this.yaoCaiList[randomIndex]);

        }
        this.shuju.push(this.generate_rand_num(10,200))

      }
      this.shuju.sort(function(a, b) {
        return a-b;
      })
    if(this.huoquYc && this.shuju){
      this.initCharts()
    }
    },
    generate_rand_num(min_v, max_v) {
      //min_v下限，max_v上限
      var rand_num = parseFloat(Math.random() * (max_v - min_v + 1) + min_v);
      var a = rand_num.toFixed(1)
      return a
    },
    initCharts(){
      const chart = echarts.init(this.$refs.chart1);
      const option = {
        title: {
          text: '中药材价格增速TOP10',
          left: 'center',
          textStyle: {
            fontSize: 20,// 设置标题字体大小为20
            left: 'center'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },

        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          min: 0,
          max: 260,
          interval: 20,
          axisLabel: {
            formatter: '{value} %'
          }
          // boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: this.huoquYc,
          axisLabel: {
            // 默认x轴字体大小
            fontSize: 16,
            fontWeight: 'bold',

            /*   interval: 0,
               // 设置文字倾斜显示
               rotate: -60,
               color: "#fff",
               // margin:文字到x轴的距离
               margin: 5,*/
          }
        },
        series: [
          {
            // name:'category' ,
            type: 'bar',
            data: this.shuju
          },
         /* {
            name: this.huoquYc[0],
            type: 'bar',
            data: [this.shuju[0]]
          },
          {
            name: this.huoquYc[1],
            type: 'bar',
            data: [this.shuju[1]]
          },
          {
            name: this.huoquYc[2],
            type: 'bar',
            data: [this.shuju[2]]
          },
          {
            name: this.huoquYc[3],
            type: 'bar',
            data: [this.shuju[3]]
          },
          {
            name: this.huoquYc[4],
            type: 'bar',
            data: [this.shuju[4]]
          },
          {
            name: this.huoquYc[5],
            type: 'bar',
            data: [this.shuju[5]]
          },
          {
            name: this.huoquYc[6],
            type: 'bar',
            data: [this.shuju[6]]
          },
          {
            name: this.huoquYc[7],
            type: 'bar',
            data: [this.shuju[7]]
          },
          {
            name: this.huoquYc[8],
            type: 'bar',
            data: [this.shuju[8]]
          },
          {
            name: this.huoquYc[9],
            type: 'bar',
            data: [this.shuju[9]]
          },
*/
        ]
      };

      chart.setOption(option);
    }
  }
}
</script>
<style>
</style>
